<template>
  <div class="containers" ref="content">
    <flow-chart 
      :nodes="nodes" 
      :connections="connections" 
      :readonly='true'
      :width='1000'
      ref="chart">
    </flow-chart>
  </div>
</template>
<script>
import FlowChart from 'flowchart-vue';
export default {
  components:{
    FlowChart
  },
  data() {
    return {
      nodes: [
      { 
        id: 1, 
        x: 40, 
        y: 70, 
        name: 'Start', 
        type: 'start', // or 'operation'
        width: 120,
        height: 60
      },
      { 
        id: 1, 
        x: 140, 
        y: 270, 
        name: 'End', 
        type: 'operation', // or 'operation'
        width: 120,
        height: 60
      },
    ],
    connections: [
      {
        source: {id: 1, position: 'right'},
        destination: {id: 2, position: 'left'},
        id: 1,
        type: 'pass',
      },
    ],
    };
  },
  methods: {
    
  },
  mounted(){
  }
};
</script>
<style scoped>
</style>